<template>
  <div>
    <el-row :gutter="Number(20)">
      <el-col :span="8">
        <div class="user-panel">
          <el-card shadow="hover">
            <div class="userInfo">
              <img :src="imgUrl" alt="用户头像" />
              <div class="userDetail">
                <p class="userName">zhang</p>
                <p class="userAccess">超级管理员</p>
              </div>
            </div>
            <div class="loginInfo">
              <p class="loginTime">上次登录时间：<span>{{ curDate | modifyDate }}</span></p>
              <p class="loginLocation">上次登录地点：<span>陕西-西安</span></p>
            </div>
          </el-card>
        </div>
        <div class="info-panel">
          <el-card shadow="hover">
            <el-table :data="tableData">
              <el-table-column :formatter="priceFormatter" show-overflow-tooltip v-for="(item, index) in tabelLabel" :key="index" :prop="index" :label="item" />
            </el-table>
          </el-card>
        </div>
      </el-col>
      <el-col :span="16" style="margin-bottom: 15px">
        <div class="price-card-list">
          <el-card shadow="hover" v-for="item in orderData" :key="item.name" class="price-card">
            <svg 
              class="icon" aria-hidden="true"
              :style="{backgroundColor: item.color}"
            >
            <use :xlink:href="`#icon-${item.icon}`"></use></svg>
            <div>
              <p class="price">
                <span v-if="!item.title.includes('收藏')">￥{{item.totalPrice}}</span>
                <span v-else>{{item.totalPrice}}次</span>
              </p>
              <p class="text">{{item.title}}</p>
            </div>
          </el-card>
        </div>
        <div class="video-chart">
          <el-card shadow="hover" style="height: 280px">
            <common-echarts :chartData="echartData.sale" />
          </el-card>
        </div>
        <div class="graph">
          <el-card shadow="hover" style="height: 260px">
            <common-echarts :chartData="echartData.user" />
          </el-card>
          <el-card shadow="hover" style="height: 260px" body-style="{height: 260px}">
            <common-echarts :chartData="echartData.video" :isAxisChart="false" />
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getVideoData, getorderData, getTableData, getSaleData, getUserData } from 'network/home.js'
import CommonEcharts from 'components/CommonEcharts.vue'
export default {
  name: 'Home',
  data() {
    return {
      imgUrl: require('assets/img/2.jpeg'),
      curDate: new Date,
      orderData: [],
      tableData: [],
      tabelLabel: {
        name: '课程',
        todayBuy: '本日购买',
        monthBuy: '本月购买',
        totalBuy: '总购买'
      },
      echartData: {
        sale: {
          xData: [],
          series: []
        },
        user: {
          xData: [],
          series: []
        },
        video: {
          series: []
        }
      }
    }
  },
  components: { 
    CommonEcharts
  },
  created() {
    //1、获取订单信息
    this.getorderData()
    //2、获取表格信息
    this.getTableData()
    //3、获取video信息
    this.getVideoData()
    //4、获取sale信息
    this.getSaleData()
    //5、获取用户信息
    this.getUserData()
  },
  methods: {
    getVideoData() {
      getVideoData()
        .then(res => {
          console.log(res.data.data.videoData);
          this.echartData.video.series.push({
            data: res.data.data.videoData,
            type: 'pie'
          })
        })
    },
    getorderData() {
      getorderData()
        .then(res => {
          this.orderData = res.data.data.orderInfo
          // console.log(res.data.data.orderInfo);
        })
    },
    getTableData() {
      getTableData()
        .then(res => {
          this.tableData = res.data.data.tableData
          // console.log(res.data.data.tableData);
        })
    },
    getSaleData() {
      getSaleData()
        .then(res => {
          // console.log(res.data.data.saleData);
          const saleData = res.data.data.saleData
          this.echartData.sale.xData = saleData.selltime
          const keyArray = Object.keys(saleData.selldata[0])
          keyArray.forEach(key => {
            this.echartData.sale.series.push({
              name: key === 'wechat' ? '小程序' : key,
              data: saleData.selldata.map(item => item[key]),
              type: 'line'
            })
          })
        })
    },
    getUserData() {
      getUserData()
        .then(res => {
          console.log(res.data.data.userData);
          const userData = res.data.data.userData
          this.echartData.user.xData = userData.time
          const keyArray = Object.keys(userData.num[0])
          keyArray.forEach(key => {
            this.echartData.user.series.push({
              name: key,
              data: userData.num.map(item => item[key]),
              type: 'bar'
            })
          })
        })
    },
    priceFormatter(row, column, cellValue) {
      if(typeof cellValue != "number") {
        return cellValue
      }
      else {
        return parseInt(cellValue) + '￥'
      }
    }
  },
  filters: {
    modifyDate(Date) {
      const day = Date.getDate()
      const month = Date.getMonth() + 1
      const year = Date.getFullYear()
      return `${year}-${month}-${day}`
    },
    addUnit(price) {
      return price + '￥'
    }
  }
}
</script>
<style lang="scss" scoped>
  .user-panel {
    .el-card {
      height: 300px;
      margin-bottom: 15px;
      .userInfo {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
        img {
          width: 150px;
          height: 150px;
          border-radius: 50%;
          margin-right: 40px;
          box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        }
        .userDetail {
          .userName {
            font-size: 2em;
            margin-bottom: 15px;
          }
          .userAccess {
            color: #999999;
          }
        }
      }
      .loginInfo {
        line-height: 28px;
        font-size: 18px;
        color: #999999;
        span {
          color: #666666;
          margin-left: 60px;
        }
      }
    }
  }

  .info-panel {
    .el-card {
      height: 434px;
      margin-bottom: 15px;
    }
  }

  .price-card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .price-card {
      width: 32%;
      margin-bottom: 15px;
      display: flex;
      /deep/ .el-card__body {
        display: flex;
        align-items: center;
        padding: 0;
          .icon {
            font-size: 30px;
            width: 80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            color: #fff;
          }
          div {
            display: flex;
            flex-direction: column;
            margin-left: 15px;
            justify-content: center;
            .price {
              font-size: 30px;
              margin-bottom: 10px;
            }
            .text {
              font-size: 14px;
              text-align: center;
              color: #999999;
            }
          }
      }
    }
  }

  .video-chart {
    .el-card {
      margin-bottom: 15px;
    }
  }

  .graph {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-card {
      width: 49%;
    }
  }
</style>